<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/
  .weui-cell_select {
    padding: 10px 15px;
  }
  .weui-cells__title {
    text-align: left;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
</style>
<template>
  <div class="oitem">
    <div class="weui-cells__title">货品明细{{itemNo + 1}}
      <p id="acts" style="float: right;color: #1aad19;" v-if="isLast">
        <span id="addItem" @click="addItem" style="padding-right: 5px;">添加</span>
        <span v-if="itemNo != 0">|</span>
        <span id="delItem" style="padding-left: 5px;" @click="delItem" v-if="itemNo != 0">删除</span>
      </p>
    </div>
    <div class="weui-cell weui-cell_select fir">
      <div class="weui-cell__hd"><label class="weui-label">货品类型</label></div>
      <div class="weui-cell__bd">
        <select class="weui-select" v-model="cate" @change="doEmitter">
          <option value="">请选择货品类型</option>
          <option v-for="(item, index) in types" :value="item.dictValue" >{{item.dictLabel}}</option>
        </select>
      </div>
    </div>
    <div class="weui-cell weui-cell_select fir">
      <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
      <div class="weui-cell__bd">
        <select class="weui-select product" v-model="currentProduct" @change="doEmitter">
          <option value="" disabled>请选择</option>
          <option selected="" v-for="(item, index) in products" :key="item.guid" :value="item">{{item.productname}}</option>
        </select>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">规格 </label></div>
      <div class="weui-cell__bd">
<!--        <select class="weui-select spec" ref="spec"  v-model="spec" @change="doEmitter">-->
<!--          <option selected="" v-for="(item, index) in specifications" :key="item.guid" :value="item">{{item.name}}</option>-->
<!--        </select>-->
        <model-list-select :list="specifications"
                           v-model="specId"
                           option-value="guid"
                           option-text="name"
                           placeholder="请选择">
        </model-list-select>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">数量</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input weight inlinput1" type="number" v-model="count" placeholder="请输入数量" @change="doEmitter" />
        <input class="weui-input inlinput2" type="text" readonly :value="spec.stockunit">
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
      <div class="weui-cell__bd">
        <textarea class="weui-textarea" v-model="remark" placeholder="请输备注内容" rows="2" @change="doEmitter"></textarea>
      </div>
    </div>
  </div>
</template>

<script>
  import 'vue-search-select/dist/VueSearchSelect.css'
  import {ModelListSelect} from 'vue-search-select'
export default {
  name: 'TransApplyItem',
  data () {
    return {
      openid: localStorage.openid,
      products: [],
      currentProduct: '',
      specifications: [],
      cate: '',
      count: '',
      spec: '',
      showSpec: false,
      remark: '',
      model: {},
      specId: ''
    }
  },
  components: {ModelListSelect},
  props: [
    'itemNo',
    'isLast',
    'types'
  ],
  computed: {

  },
  mounted() {
  },
  watch: {
    'currentProduct.guid': function (val) {
      this.getSpecs();
    },
    'cate': function () {
      this.getProducts();
      this.getSpecs();
    },
    'specId': function (val) {
      if (!val) return;
      this.spec = this.specifications.filter(item => item.guid == val)[0];
      this.doEmitter();
    },
  },
  methods: {
    doEmitter(){
      this.model = {
        type: this.cate,
        shiftweight: this.count,
        productguid: this.currentProduct.guid,
        product: this.currentProduct.productname,
        spname: this.spec.name,
        rawspguid: this.spec.guid,
        spguid: this.spec.guid,
        stockunit: this.spec.stockunit,
        stockunitid: this.spec.stockunitid,
        remark: this.remark
      };
      this.model.index = this.itemNo;
      this.$emit('changeData', this.model);
    },
    addItem: function () {
      this.$emit('doAddItem');
    },
    delItem: function () {
      this.$emit('doDelItem');
    },
    getProducts: function () {
      let cate = this.cate;
      if (this.cate == 2) {
        cate = '2,5';
      }
      let that = this;
      this.axios({
        method: 'get',
        responseType: 'json',
        url: '/prod-api/getProducts',
        params: {productflag: cate}
      }).then(response => {
        if (response.data.code == 200) {
          this.products = response.data.data;
          console.log('products:', this.products)
        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastText('获取货品数据失败')
        }
      });
    },
    getSpecs: function() {
      if (this.currentProduct == '') {
        return;
      }
      this.axios({
        method: 'get',
        url: '/prod-api/getSpecs',
        params: {productGuid: this.currentProduct.guid, type: this.cate, stats: 1}
      }).then((response) => {
        if (response.data.code == 200) {
          this.specifications = response.data.data;
        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastError("获取规格数据失败");
        }
      })
    }
  }
}
</script>
